<template>
  <div id="test_title" class="screen-container" ref="my_container">
    <header class="screen-header">
      <span id="yuqing_title" class="title">
        <strong>
<!--          新疆舆情实时监控系统-->
        </strong>
      </span>
      <div class="title-right">
<!--        <span id="test_time" class="datetime">2049-01-01 00:00:00</span>-->
      </div>
    </header>
    <div class="screen-body">
      <section id="province" class="screen-first">
        <strong>
          今日敏感舆情
        </strong>
      </section>
      <section class="screen-seconds">

        <!--        <div class="mychart-container" ref="mychart1">-->
        <!--        </div>-->
        <div class="mytable">
          <table style="border: #f6edd1 1px solid">
            <tr>
              <td>标题</td>
              <td colspan="3">&emsp;{{table_data.title}}</td>
            </tr>
            <tr>
              <td>来源</td>
              <td>&emsp;{{table_data.source}}</td>
              <td>媒体类型</td>
              <td>&emsp;{{table_data.media}}</td>
            </tr>
            <tr>
              <td>所属地域</td>
              <td colspan="3">
                <span v-for="(item,index) in table_data.location">
                  {{item}},
                </span>
              </td>
<!--              <td>所属重点区域</td>-->
<!--              <td>2</td>-->
            </tr>
            <tr>
              <td>舆情属性</td>
              <td>&emsp;{{table_data.emotion}}</td>
              <td>涉及关键词</td>
              <td>
                <span v-for="(item,index) in table_data.keywords">
                  {{item}},
                </span>
<!--                {{table_data.keywords}}-->
              </td>
            </tr>
            <tr>
              <td>主题</td>
              <td>&emsp; {{table_data.mainContent[0]}}</td>
              <td>发布时间</td>
              <td>&emsp;xxxx-xxx</td>
            </tr>
            <tr>
              <td>原文链接</td>
              <td colspan="3" >
                <span style="cursor:pointer"
                @click="changeUrl" >
                  {{table_data.url}}
                </span>
<!--                <a href=""+{{table_data.url}}>{{table_data.url}}</a>-->
              </td>
            </tr>
            <tr>
              <td colspan="4">
                <section>
                  &emsp; &emsp; {{table_data.content.substring(0,490)}}......
                </section>
              </td>
            </tr>
          </table>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: "today_yuqing_detail",
  data() {
    return {
      table_data: [],
      // echarts_data: [],?articleId=
      font_size_test: 1
    }
  }, mounted() {
    // this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
    // document.getElementById("test_content").style.fontSize="40px"
  },
  methods: {
    changeUrl(){
      // console.log(this.table_data)
      // alert(table_data.url)
      // self.location=table_data.url;
      window.location.href=this.table_data.url;
      // this.route.replace(table_data.url)
    },

    async getData() {

      const {data: ret} = await this.$http.get('/TT_article/getTT_articleDetail?articleId='+this.$route.query.articleId)
      this.table_data = ret.data

      if(this.table_data.emotion=="NEG"){
        this.table_data.emotion="消极"
      }
      if(this.table_data.emotion=="NEU"){
        this.table_data.emotion="中性"
      }
      if(this.table_data.emotion=="POS"){
        this.table_data.emotion="积极"
      }

      console.log(this.table_data)

      this.chartInstance = this.$echarts.init(this.$refs.mychart1)

    },
    screenAdapter() {
      console.log("screenAdapter")
      // console.log(document.getElementById('yuqing_title').style.width)
      // this.font_size_test=document.getElementById('my_container').style.width
      this.font_size_test = this.$refs.my_container.offsetWidth / 200 * 2.2
      console.log(this.font_size_test)
      document.getElementById("test_title").style.fontSize = this.font_size_test + "px"
      document.getElementById("yuqing_title").style.fontSize = this.font_size_test * 1.4 + "px"
      document.getElementById("province").style.fontSize = this.font_size_test * 1.2 + "px"
      // document.getElementsByTagName("table").style.fontSize=this.font_size_test*2

      /*const adapterOption = {
        title: {
          textStyle: {
            fontSize: this.font_size_test
          }
        },
        series: [
          {
            barWidth: this.font_size_test,
            itemStyle: {
              barBorderRadius: [this.font_size_test / 2, this.font_size_test / 2, 0, 0]
            }
          }
        ]
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()*/
    }
  },


}
</script>

<style lang="less" scoped>


.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}


tr > td:first-child {
  width: 10%;
}

tr td:nth-child(3) {
  width: 10%;
  border-right: 1px solid #e5e5e5;
}

tr td:nth-child(2) {
  width: 40%;
  border-right: 1px solid #e5e5e5;
}

tr td:nth-child(4) {
  width: 40%;
  border-right: 1px solid #e5e5e5;
}


th, td {
  padding: 1% 0;
  border: 1px solid #f6edd1;
}

.screen-header {
  width: 100%;
  height: 6%;
  //font-size: 20px;
  background-color: #161522;
  position: relative;
  color: #fff;

  > div {
    img {
      width: 100%;
    }
  }

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }

  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }

  .datetime {
    //font-size: 15px;
    margin-left: 10px;
  }

  .logo {
    //position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-40%);

    img {
      height: 80%;
      width: 10%;
    }
  }
}

.screen-body {
  width: 100%;
  height: 100%;
  //display: flex;
  //flex-direction: column;
  //flex-wrap: wrap;
  margin-top: 10px;

  .screen-first {
    width: 100%;
    height: 6%;
    //font-size: 25px;
    padding-left: 1%;
    padding-top: 1%;
    background: #0C1E37;
  }

  .screen-seconds {
    margin-top: 1%;
    width: 100%;
    height: 92%;
    //font-size: 25px;
    display: flex;

    .mychart-container {
      width: 47%;
      height: 80%;
      background: #0C1E37;
    }

    .mytable {
      padding-left: 10%;
      padding-right: 10%;
      width: 100%;
      height: 80%;
      //margin-left: 1%;
      background: #0C1E37;
    }
  }
}

.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

* {
  //border: 1px solid red;
}
</style>
